<template>
  <view class="container">
    <u-navbar
      :is-fixed="false"
      :border-bottom="false"
      :is-back="true"
      back-icon-name="arrow-leftward"
      title="舌检表"
      :background="{ background: '#fff' }"
      title-color="#000000"
    >
    </u-navbar>
    <view class="warn">
      注意事项<br>
      1.检查前应避免食用颜色较深的食物或饮料，因为色素会附着在舌头上，影响判断<br>
      2.伸出舌头时要尽量保持放松<br>
      3.若舌头伸出时间过长，舌头颜色会发生变化
    </view>
    <view style="padding: 30rpx;">正常的舌部,舌头与其他部位的对应情况</view>
    <view class="imgs">
      <image class="img img-half" src="/static/images/tone1.png"></image>
      <image class="img img-half" src="/static/images/tone2.png"></image>
      <image class="img img-full" src="/static/images/tone3.png"></image>
      <image class="img img-full" src="/static/images/tone4.png"></image>
      <image class="img img-full" src="/static/images/tone5.png"></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
    };
  },
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  overflow: hidden;
}
.imgs {
  display: flex;
  flex-wrap: wrap;
  .img {
    width: 100%;
  }
  .img-half {
    width: 50%;
    height: 20vh;
  }
  .img-full {
    height: 60vh;
  }
}
.warn {
  padding: 20rpx;
  width: calc(100% - 60rpx);
  margin: 30rpx;
  border: 1rpx dashed orangered;
}
</style>
